<template>
  <div class="page-mobile-user-edit">
    <white-header :isShowTopNav="true" :isShowBack="true" :isShowRight="true" :title="title"></white-header>
    <div class="user_info">
      <div class="info_item" @click="$router.push('/m/edit-detail?info=avatar')">
        <div class="info_left">头像</div>
        <div class="info_right">
          <img class="avater" v-if="user_info.avatar" v-lazy="user_info.avatar" :key="user_info.avatar"/>
          <img class="avater" v-else src="/img/mobile/default-avatar.png" alt="">
          <img class="right_icon" src="/img/mobile/right-icon.png" alt="">
        </div>
      </div>
      <div class="info_item" @click="$router.push('/m/edit-detail?info=acName')">
        <div class="info_left">昵称</div>
        <div class="info_right">
          <div>{{user_info.acName || $t('locale.mobile.edit.empty')}}</div>
          <img class="right_icon" src="/img/mobile/right-icon.png" alt="">
        </div>
      </div>
      <div class="info_item" @click="$router.push('/m/edit-detail?info=mobile')">
        <div class="info_left">手机号</div>
        <div class="info_right">
          <div>{{user_info.mobile || $t('locale.mobile.edit.empty')}}</div>
          <img class="right_icon" src="/img/mobile/right-icon.png" alt="">
        </div>
      </div>
      <div class="info_item" @click="$router.push('/m/edit-detail?info=email')">
        <div class="info_left">邮箱</div>
        <div class="info_right">
          <div>{{user_info.email || $t('locale.mobile.edit.empty')}}</div>
          <img class="right_icon" src="/img/mobile/right-icon.png" alt="">
        </div>
      </div>
      <div class="info_item" @click="$router.push('/m/edit-detail?info=idNumber')">
        <div class="info_left">身份证</div>
        <div class="info_right">
          <div>{{user_info.idNumber || $t('locale.mobile.edit.empty')}}</div>
          <img class="right_icon" src="/img/mobile/right-icon.png" alt="">
        </div>
      </div>
      <div class="info_item" @click="$router.push('/m/edit-detail?info=gender')">
        <div class="info_left">性别</div>
        <div class="info_right">
          <div>{{
          user_info.gender == 1
            ? $t("locale.mobile.edit.male")
            : user_info.gender == 0
            ? $t("locale.mobile.edit.female")
            : $t("locale.mobile.edit.unknow")
        }}</div>
          <img class="right_icon" src="/img/mobile/right-icon.png" alt="">
        </div>
      </div>
      <div class="info_item" @click="$router.push('/m/edit-detail?info=birthday')">
        <div class="info_left">生日</div>
        <div class="info_right">
          <div>{{ trimDate(user_info.birthday) }}</div>
          <img class="right_icon" src="/img/mobile/right-icon.png" alt="">
        </div>
      </div>
      <div class="info_item">
        <div class="info_left">班级</div>
        <div class="info_right">
          <div>{{ getClassName(user_info.userClass) }}</div>
          <img class="right_icon" src="/img/mobile/right-icon.png" alt="">
        </div>
      </div>
      <div class="info_item" v-if="kl_md.KLYXRZ == 1" @click="false && $router.push('/m/edit-detail?info=gradeId')">
        <div class="info_left">年级</div>
        <div class="info_right">
          <div>{{ user_info.gradeName }}</div>
          <img class="right_icon" src="/img/mobile/right-icon.png" alt="">
        </div>
      </div>
      <div class="info_item" v-if="kl_md.KLYXRZ == 1" @click="false && $router.push('/m/edit-detail?info=schoolCollegeId')">
        <div class="info_left">报考院校</div>
        <div class="info_right">
          <div>{{ user_info.schoolCollegeName }}</div>
          <img class="right_icon" src="/img/mobile/right-icon.png" alt="">
        </div>
      </div>
      <div class="info_item" @click="$router.push('/m/edit-detail?info=originalMajor')">
        <div class="info_left">专业/部门</div>
        <div class="info_right">
          <div>{{ user_info.originalMajor }}</div>
          <img class="right_icon" src="/img/mobile/right-icon.png" alt="">
        </div>
      </div>
      <div class="info_item" @click="$router.push('/m/edit-detail?info=originalSchool')">
        <div class="info_left">学校/单位</div>
        <div class="info_right">
          <div>{{ user_info.originalSchool }}</div>
          <img class="right_icon" src="/img/mobile/right-icon.png" alt="">
        </div>
      </div>
    </div>
    <div class="user_desc">
      <div class="info_item" @click="$router.push('/m/edit-detail?info=introduce')">
        <div class="info_left">个人介绍</div>
        <div class="info_right">
          <div class="desc">{{ user_info.introduce || $t("locale.mobile.edit.empty") }}</div>
          <img class="right_icon" src="/img/mobile/right-icon.png" alt="">
        </div>
      </div>
      <!-- <div class="info_item">
        <div class="info_left">就读院校</div>
        <div class="info_right">
          <div>广东财经大学</div>
          <img class="right_icon" src="/img/mobile/right-icon.png" alt="">
        </div>
      </div> -->
      <!-- <div class="info_item">
        <div class="info_left">收货地址</div>
        <div class="info_right">
          <div>修改/添加</div>
          <img class="right_icon" src="/img/mobile/right-icon.png" alt="">
        </div>
      </div> -->
    </div>
    <div class="logout" @click="handleLogout">退出登录</div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
import WhiteHeader from "~/components/mobile/WhiteHeader.vue";
import { wxLogin,userLogout } from "~/api/account/user";
export default {
  components: {
    WhiteHeader
  },
  data() {
    return {
      title:"个人信息"
    };
  },
  computed: {
    ...mapState({
      token(state) {
        return state.token;
      },
      user_info(state) {
        return state.user_info;
      },
      login_type(state) {
        return state.login_type;
      },
      theme_color(state) {
        return state.theme_color;
      },
      major_list(state) {
        return state.major_list;
      },
      class_list(state) {
        return state.class_list;
      },
      is_hidden_for_ios(state) {
        return state.is_hidden_for_ios;
      },
      is_hidden_content(state) {
        return state.is_hidden_content;
      },
      kl_md(state) {
        return state.kl_md;
      }
    })
  },
  activated() {
    if (process.client) {
      if (!this.token && Object.keys(this.user_info).length == 0) {
        this.$router.replace("/m/login");
      }
    }
  },
  watch: {},
  methods: {
    ...mapActions(["initMajorList", "initClassList"]),
    async handleLogout() {
      this.$dialog
        .confirm({
          title: this.$t("locale.mobile.user.t16"),
          message: this.$t("locale.mobile.user.t17")
        })
        .then(async () => {
          let params = {};
          if (this.login_type == "email") {
            params = {
              email: this.user_info.email
            };
          } else if (this.login_type == "mobile") {
            params = {
              account: this.user_info.mobile
            };
          } else {
            params = {
              account: this.user_info.account
            };
          }
          let result = await userLogout(params);
          if (result.data.code === 200) {
            this.$store.commit("SIGN_OUT");
            this.$router.replace("/m/user");
            this.$toast(this.$t("locale.mobile.user.t18"));
          } else {
            this.$store.commit("SIGN_OUT");
            // this.$toast(this.$t("locale.mobile.user.t19"));
          }
        })
        .catch(() => {});
    },
    trimDate(date) {
      if (date) {
        let _date = new Date(date);
        return `${_date.getFullYear()}-${_date.getMonth() +
          1}-${_date.getDate()}`;
      } else {
        return this.$t("locale.mobile.edit.unknow");
      }
    },
    getMajorName(id) {
      let res = this.major_list.filter(i => i.id == id);
      if (res.length > 0) {
        return res[0].name;
      } else {
        return this.$t("locale.mobile.edit.t14");
      }
    },
    getClassName(id) {
      let res = this.class_list.filter(i => i.id == id);
      if (res.length > 0) {
        return res[0].name;
      } else {
        return this.$t("locale.mobile.edit.t15");
      }
    },
    async bindWechat() {
      const { wechat } = this.user_info;
      if (!wechat) {
        let result = await wxLogin();
        console.log("result:", result);
        if (result.data.code == 200) {
          window.location.href = result.data.msg;
        } else {
          this.$toast(
            this.$t("locale.mobile.edit.t16") + result &&
              result.data &&
              result.data.data
          );
        }
      } else {
        return;
      }
    }
  },
  created() {
    if (!this.token && Object.keys(this.user_info).length == 0) {
      this.$router.push("/m/login");
    }
    this.initClassList();
    this.initMajorList();
  },
  mounted() {}
};
</script>

<style lang="scss" scoped>
.page-mobile-user-edit {
  min-height: 100vh;
  background-color: #eef0f4;
  .user_info{
    background: #ffffff;
    margin: .2rem 0;
    padding-left: .4rem;
    box-sizing: border-box;
    width: 100%;
    .info_item{
      width: 100%;
      height: 1rem;
      border-bottom: 0.0096rem solid #ededf1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: .3rem;
      font-weight: bold;
      .info_left{}
      .info_right{
        display: flex;
        align-items: center;
        color: #adafb3;
        .avater{
          width: 1.056rem;
          height: 1.056rem;
          overflow: hidden;
          border-radius: 50%;
          display: block;
        }
        .right_icon{
           margin: 0 .1rem;
          width: .2304rem;
          height: .2304rem;
          display: block;
        }
      }
    }
    .info_item:first-child{
      width: 100%;
      height: 1.564rem;
    }
    .info_item:last-child{
      border-bottom:none;
    }
    
  }
  .user_desc{
    background: #ffffff;
    margin: .2rem 0;
    padding-left: .4rem;
    box-sizing: border-box;
    width: 100%;
    .info_item{
      width: 100%;
      height: 1rem;
      border-bottom: 0.0096rem solid #ededf1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: .3rem;
      font-weight: bold;
      .info_right{
        display: flex;
        align-items: center;
        color: #adafb3;
        .desc{
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          width: 4.4rem;
          text-align: right;
        }
        .right_icon{
           margin: 0 .1rem;
          width: .2304rem;
          height: .2304rem;
          display: block;
        }
      }
    }
    .info_item:last-child{
      border-bottom:none;
    }
  }
  .logout{
    width: 100%;
    height: 1rem;
    text-align: center;
    line-height: 1rem;
    font-size: .3rem;
    color: #ff7c7c;
    background: #ffffff;
    font-weight: bold;
    
  }
}
</style>
<style lang="scss">
.page-mobile-user-edit {
  
}
</style>
